<template>
    <div ref="scEcharts" :style="{height:height, width:width}"></div>
</template>

<script>
import * as echarts from 'echarts';
import T from './echarts-theme-T.js';
echarts.registerTheme('T', T);
const unwarp = (obj) => obj && (obj.__v_raw || obj.valueOf() || obj);

export default {
    ...echarts,
    name: "scEcharts",
    props: {
        height: { type: String, default: "100%" },
        width: { type: String, default: "100%" },
        nodata: { type: Boolean, default: false },
        option: { type: Object, default: () => { } }
    },
    data() {
        return {
            isActivat: false,
            myChart: null
        }
    },
    watch: {
        option: {
            deep: true,
            handler(v) {
                unwarp(this.myChart).setOption(v);
            }
        }
    },
    computed: {
        myOptions: function () {
            return this.option || {};
        }
    },
    activated() {
        if (!this.isActivat) {
            this.$nextTick(() => {
                this.myChart.resize()
            })
        }
    },
    deactivated() {
        this.isActivat = false;
    },
    mounted() {
        this.isActivat = true;
        this.$nextTick(() => {
            this.draw();
        })
    },
    methods: {
        draw() {
            var myChart = echarts.init(this.$refs.scEcharts, 'T');
            myChart.setOption(this.myOptions);
            this.myChart = myChart;
            window.addEventListener('resize', () => myChart.resize());
        }
    }
}
</script>
